<template>
	<view class="filterWrap">
		<view class="filterTit spaceBet">
			<view class="leftFilter hasFlex">
				<view class="filterItem flex1 hasFlex">
					<picker class="picerView" @change="bindFieldsFilter" :value="fieldsIndex" :range="fieldsArr" range-key="lyName">
						<text class="pickerTxt ellip">{{fieldsArr[fieldsIndex].lyName}}</text>
						<text class="iconfont icon-sanjiao"></text>
					</picker>
				</view>
				<view class="filterItem flex1 hasFlex">
					<picker class="picerView" @change="bindSortFilter" :value="sortIndex" :range="sortArr" range-key="name">
						<text class="pickerTxt ellip">{{sortArr[sortIndex].name}}</text>
						<text class="iconfont icon-sanjiao"></text>
					</picker>
				</view>
			</view> 
			<view class="rightFilter" @tap="goFilter" v-if="currPage == 'zxsList'">
				<text class="iconfont icon-shaixuan"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			fieldsArr:Array,
			fieldsIndex:Number,
			sortArr:Array,
			sortIndex:Number,
			isHasFixedFlag:Boolean,
			currPage:{
				type:String,
				default:'zxsList'
			},
			levelArr:Array,
			levelIndex:Number,
			sexArr:Array,
			sexIndex:0
		},
		data(){
			return{
				isHasSelFlag : true,
				specFlag : false,
				filterTab:[
					{id:'',name:'全部'},
					{id:0,name:'今日可约'},
					{id:1,name:'预约最多'},
					{id:2,name:'低价优先'},
					{id:3,name:'最新入驻'}
				],
				filterIndex:0
			}
		},
		computed: {
		    scrollLeft() {
		        return (this.filterIndex - 1) * 60;
		    }
		},
		methods:{
			bindSortFilter(e){
				this.$emit('bindSortFilter',e.target.value);
			},
			bindFieldsFilter(e){
				this.$emit('bindFieldsFilter',e.target.value);
			},
			bindDdsLevelFilter(e){
				this.$emit('bindDdsLevelFilter',e.target.value);
			},
			bindSexFilter(e){
				this.$emit('bindSexFilter',e.target.value);
			},
			goFilter(){
				this.$emit('goFilter')
			}
		}
	}
</script>

<style lang='scss' scoped>
	.filterWrap{
		width: 100%;
		box-shadow:  0 6rpx 8rpx rgba(0,0,0,.05);
		background: #fff;
		.filterTit{
			height: 80rpx;
			line-height: 80rpx;
			font-size: $font-size30;
			color: $pss-text-color3;
			padding: 0 30rpx;
			.leftFilter{
				width: 85%;
				.filterItem{
					width: 33.3%;
					height: 100%;
					justify-content: center;
					align-items: center;
					font-size: $font-size26;
					color: $pss-text-colord;
					.picerView{
						height: 100%;
						color: $pss-text-colord;
					}
					.pickerTxt{
						max-width: 82%;
						text-align: center;
						color: $pss-text-color3;
					}
					&.flex1{
						flex: 1;
					}
				}
			}
			.rightFilter{
				width: 15%;
				line-height: 80rpx;
				color: $pss-text-color8;
				text-align: right;
				.icon-shaixuan{
					margin-left: 10rpx;
					font-size: 40rpx;
				}
			}
		}
	}
</style>